<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
</head>
<body>
<div id="app">
    <el-table :data="orders" style="width: 100%">
        <el-table-column prop="id" label="订单号" width="180"></el-table-column>
        <el-table-column prop="orderDate" label="订单日期" width="180"></el-table-column>
        <el-table-column prop="totalDmount" label="总金额" width="180"></el-table-column>
        <el-table-column prop="orderStatus" label="状态"></el-table-column>
        <el-table-column label="操作" width="180">
            <template slot-scope="scope" style="display: none">
                <el-button type="text" @click="handleDelete(scope.row)">删除订单</el-button>
                <el-button type="text" @click="handleEdit(scope.row)">取消订单</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
            @current-change="handlePageChange"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            :total="total"
            layout="total, prev, pager, next, jumper">
    </el-pagination>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            orders: [],
            currentPage: 1,
            pageSize: 10,
            total: 0
        },
        methods: {
            // 编辑订单
            handleEdit(row) {
                if (row.orderStatus === 'Succeed' || row.orderStatus === 'Delivered') {
                    this.$message.error("已完成和已发货订单不能取消");
                }else if (row.orderStatus === 'Processing') {
                    this.$confirm('确认取消该订单吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                        .then(() => {
                            console.log(row.id);
                        axios.get('/orders/cancel',{
                            params: {
                                id: row.id
                            }
                        })
                           .then(response => {
                                if (response.data !== null) {
                                    this.$message.success("订单取消成功");
                                    this.fetch(this.currentPage, this.pageSize);
                                } else {
                                    this.$message.error("订单取消失败:" + row.id);
                                }
                            })
                           .catch(error => {
                                this.$message.error("订单取消失败:" + error.message);
                            });
                    }).catch(() => {
                        console.log('取消删除');
                    });
                }
            },
            // 删除订单
            handleDelete(row) {
                if (row.orderStatus === 'Succeed' || row.orderStatus === 'Delivered') {
                    this.$message.error("已完成和已发货订单不能删除");
                }else if (row.orderStatus === 'Pending' || row.orderStatus === 'Processing' || row.orderStatus === 'Cancelled') {
                    this.$confirm('确认删除该订单吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                        .then(() => {
                        axios.delete('/orders/delete', {
                            params: {
                                id: row.id
                            }
                        })
                           .then(response => {
                               console.log("@@@"+row.id);
                                if (response.data !== null) {
                                    this.$message.success("订单删除成功");
                                    this.fetch(this.currentPage, this.pageSize);
                                } else {
                                    this.$message.error("订单删除失败:" + row.id);
                                }
                            })
                           .catch(error => {
                                this.$message.error("订单删除失败:" + error.message);
                            });
                    }).catch(() => {
                    });
                }
            },

            fetch(pageNum = 1, pageSize = 10) {
                axios.get('/orders/getMyOrders', {
                    params: {
                        pageNum: pageNum,
                        pageSize: pageSize
                    }
                })
                    .then(response => {
                        if (response.data != null) {
                            this.orders = response.data.records;  // 返回的数据结构中包含 `records`
                            this.total= response.data.total; // 返回的数据中包含 `total`
                        }
                        else {
                            this.orders = [];
                            this.total = 0;
                            this.$message.error("请重新登录后查看订单:" );
                        }
                    })
                    .catch(error => {
                        this.$message.error("获取订单列表失败:" + error.message);
                    });
            },
            handlePageChange(pageNum) {
                this.currentPage = pageNum;
                this.fetch(pageNum, this.pageSize);
            }
        },
        created() {
            this.fetch(this.currentPage, this.pageSize);
        }
    });
</script>
</body>
</html>
